<template>
  <view class="videoBottomMsg" :class="{'tabbarHeight': showTabbar,'safe-bottom': !isImagePgae}">
    <view class="textBox px32" :style="{'filter': toggleTitleShow ? 'blur(24px);' : 'blur(0px);'}" v-if="!isImagePgae">
      <view class="left">
        <view class="locaBox" v-if="item.locationName">
          <i class="iconfont icon-address"></i>
          <view class="ov1 text_shadow">{{item.locationName}}</view>
        </view>
        <view class="fz-16 u-m-b-16 communityName">@<text class="fw6">{{item.communityName}}</text></view>
        <view class="titleBody" @click="_openTitleShowFn">
          <view class="titleBox text_shadow" :style="isShowIcon ? 'max-width: 460rpx;' : 'max-width: 560rpx;'">{{item.title || ""}}{{item.content||""}}</view>
          <view class="zhankaiIcon" v-if="isShowIcon"><image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/zhankai.png" mode="widthFix" style="width:100%;height:auto;" /></view>
        </view>
      </view>

      <view class="right">
        <!-- 用户头像 -->
        <view class="tc headBox">
          <view class="avatarBox" @click="goHomePage(item)">
            <image class="image_box" :src="item.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" mode="aspectFill"/>
          </view>
          <view class="follow_box" v-if="ifAddIcon" @click.stop="attention(1)">+关注</view>
        </view>
        <!-- 跟团记录 -->
        <view class="tc fz-12 u-m-t-20 posr" style="height:130rpx;" v-show="goodsLength" @click="openBottom">
          <view class="jiaobiao" v-if="goodsList.length && goodsList[0].sellCount">{{playvolumeFn(goodsList[0].sellCount)}}</view>
          <view>
            <image src="https://image.qqpyyds.com/mpAppImg/icon/cart5_2_icon.png" style="width:72rpx;height:72rpx;" />
          </view>
          <view class="text_shadow">跟团记录</view>
        </view>
        <!-- 点赞 -->
        <view class="tc fz-12 u-m-t-35" style="height:110rpx;" @click="clickLike(item)">
          <view>
            <image 
            src="https://image.qqpyyds.com/mpAppImg/icon/like3_2_icon.png" 
            v-show="item.isLike" style="width:72rpx;height:72rpx;" />
            <image 
            src="https://image.qqpyyds.com/mpAppImg/icon/like5_2_icon.png" 
            v-show="!item.isLike" style="width:72rpx;height:72rpx;" />
          </view>
          <view class="text_shadow">{{playvolumeFn(item.likeCount) || '鼓励一下'}}</view>
        </view>
        <view style="position: relative;width: 100%;height: 130rpx;">
          <!-- 操作 -->
          <view class="tc fz-12 u-m-t-35" v-show="item.isMyself === 1" @click="clickMore">
            <view>
              <image src="https://image.qqpyyds.com/mpAppImg/icon/share3_icon.png"
              style="width:72rpx;height:72rpx;border-radius:72rpx;" />
            </view>
            <view class="u-p-t-5 text_shadow">{{playvolumeFn(item.forwardCount) || '更多操作'}}</view>
          </view>
          <!-- 分享 -->
          <view class="tc fz-12 u-m-t-35" v-show="item.isMyself !== 1" @click="clickMore">
            <view>
              <image src="https://image.qqpyyds.com/mpAppImg/icon/share9_icon.png"
              style="width:72rpx;height:72rpx;border-radius:72rpx;" />
            </view>
            <view class="u-p-t-5 text_shadow">{{playvolumeFn(item.forwardCount) || '分享'}}</view>
          </view>
        </view> 

        <view style="height:140rpx;" v-show="!goodsLength"></view>
      </view>
    </view>

 
    <!-- 商品 -->
    <!-- :next-margin="goodsLength === 1 ? '0rpx' : '160rpx'" -->
    <swiper
    :style="{'height': goodsLength ? '220rpx;' : '0rpx;','filter': toggleTitleShow ? ' blur(24px);' : ' blur(0px);'}"
    style="overflow: hidden;transition: height 0.5s;"
    :duration="500"
    :current="goodsCurrent"
    @change="goodsChange">
      <swiper-item v-for="(goods,index) in goodsList" :key="index" style="box-sizing: border-box;" class="u-p-l-24 u-p-r-24">
        <view class="goodsForBox" @click="openBottom">
          <view class="goodsImage">
            <!-- 下架 -->
            <view v-if="goods.status === 2" class="goodsMask">- 已下架 -</view>
            <!-- 售罄 -->
            <view v-else-if="goods.quantity === 0" class="goodsMask">- 已卖完 -</view>
            <!-- 结束 -->
            <!-- <view v-else-if="domloading && !goodsEndTiem" class="goodsMask">- 已结束 -</view> -->
            <!-- 正常 -->
            <!-- <view v-else class="times">{{goodsEndTiem}}</view> -->
            <image :src="goods.mainImage" mode="aspectFill" class="images"></image> 
          </view>
          <view class="goodsMsg">
            <view class="goods_msg_box" :class="{'goods_msg_box_s':(item.isCanInvite === 1||item.helpSellStatus === 1)&&(goods.status==1&&goods.quantity>0)}">
              <view class="goodsName fz-12">{{goods.goodsName}}</view>
              <view class="u-flex fz-10 u-p-t-16 u-p-b-4">
                <view class="yimai" v-if="goods.isBought">TA已买</view>
                <view class="avatar_list">
                  <image class="avatarImg_box" v-for="(avatarImg,avatarImgIndex) in goods.avatarList" :key="avatarImgIndex" :src="avatarImg" alt="" v-if="avatarImgIndex<3">
                </view>
                <view class="sellCount_box">{{playvolumeFn(goods.sellCount) || 0}}跟团</view>
              </view>
              <view style="flex:1;"></view>
              <view class="price">
                <view>
                  <text class="fz-10">￥</text>{{goods.minSalePrice}}
                </view>
                <view class="buyBtn_box" v-if="(goods.status==1&&goods.quantity>0)&&!(item.isCanInvite === 1||item.helpSellStatus === 1)" hover-class="hover"><text>立即抢购</text><i class="iconfont icon-arrow_right fz-10" style="color: #FFF;"/></view>
              </view>
            </view>
          </view>
          <!-- 邀请帮卖，一键帮卖 -->
          <view
            class="helpSell_box"
            :class="{'helpSell_bg1':item.helpSellStatus === 1,'helpSell_bg2':item.isCanInvite === 1}"
            v-if="(item.isCanInvite === 1||item.helpSellStatus === 1)&&(goods.status==1&&goods.quantity>0)"
            @click.stop="clickBestead(item.helpSellStatus === 1?1:2,item.isNeedPayMaterialCommission)"
            >
            <view v-if="item.isCanInvite === 1" class="text_box fz-12 text_box_two">{{playvolumeFn(goods.helpSaleCount || item.helpSellCount)}}人<br>正在帮卖</view>
            <view v-if="item.helpSellStatus === 1" class="text_box fz-12">¥{{goods.exclusiveAmount}}</view>
            <button class="share_helpSellBtn" v-if="item.isCanInvite === 1">邀请帮卖</button>
            <button class="share_helpSellBtn" v-if="item.helpSellStatus === 1">帮卖立赚</button>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <!-- 卡片点 -->
    <view class="spot_list" :class="{'black': isImagePgae}" v-if="goodsList.length>1">
      <view v-for="(spot , spotIndex) in goodsList" :key="spotIndex" :class="{'spot_box':true,'spot_box_av':goodsCurrent==spotIndex}"></view>
    </view>
    <!-- 卡片点 -->
    <!-- 图片轮播指示器 -->
    <view class="progressBar px32" v-if="item.mediaType === 1 && !isImagePgae">
      <view
        v-for="(img, idx) in item.dynamicMediaVOList"
        :key="idx"
        class="barBox"
        :class="{ activeClass: imageActiveIndex >= idx }"
      ></view>
    </view>

    <u-mask :custom-style="{background: 'rgba(0, 0, 0, 0.7)'}" v-if="toggleTitleShow" :show="toggleTitleShow" :zoom="false">
      <view class="openTitleBox">
        <scroll-view scroll-y style="max-height: 75vh;">
          <view class="fw6 fz-16 u-p-b-16 ov1" style="max-width:600rpx">@{{item.communityName}}</view>
          <view @longtap="_copyTitle" class="linh-28 fw5"><text>{{item.title || ""}}</text></view>
          <view class="fengexian" v-if="item.content"></view>
          <view @longtap="_copyContent" class="linh-28" v-if="item.content"><text>{{item.content}}</text></view>
        </scroll-view>
        <view class="u-p-t-32 u-p-b-32 justify-end">
          <view class="copyBottmBtn" @click="_copyTitle">复制标题</view>
          <view class="copyBottmBtn u-m-l-20" @click="_copyContent">复制内容</view>
          <view class="zhankaiIcon" @click="_closeTitleShowFn"><image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/shouqi.png" mode="widthFix" style="width:48rpx;height:48rpx;" /></view>
        </view>
      </view>
    </u-mask>

    <!-- 复用笔记 -->
    <Modal 
    :show="copyShow"
    title="是否复用笔记帮卖？"
    content="当前团购使用了带货笔记，帮卖开团出单后，需要将你获得佣金的10%支付给笔记创作者。"
    configText="复用开团"
    @close="copyShow = false" 
    @config="_configCopyMaterial" />

    <!-- 分享时可帮卖 -->
    <Modal 
    :show="shareShow"
    title="确认分享该笔记吗？"
    :content="'你正在分享“'+ item.communityName +'”的笔记，一键帮卖后再分享才可获得佣金哦！'"
    style="color: #969799;word-break:break-all;"
    claceText="直接分享"
    configText="一键帮卖"
    @close="$emit('openShare',1);_colseShareShow();" 
    @config="clickBestead(1,item.isNeedPayMaterialCommission)" />
  </view>
</template>

<script>
import dynamic from "@/api/dynamic.js";
import Util from "@/api/util.js";
import { countTextLength } from "@/utils/common.js";
import Modal from '@/components/modal/index.vue'

export default {
  components: { Modal },
  props: {
    item: {
      type: Object,
      default: {}
    },
    // 图片轮播下方指示器
    imageActiveIndex:{
      type: Number,
      default: 0
    },
    showTabbar: {
      type: Boolean,
      default: false
    },
    isImagePgae: {
      type: Boolean,
      default: false
    },
    newShareShow: {
      type: Boolean,
      default: false
    }
    // 结束时间
    // goodsEndTiem: {
    //   type: String,
    //   default: ''
    // }
  },
  data(){
    return {
      goodsList: [],
      goodsCurrent: 0,
      domloading: false,
      isShowIcon: false,
      toggleTitleShow: false,
      copyShow: false,
      shareShow: false
    }
  },
  computed:{
    goodsLength(){
      return this.goodsList ? this.goodsList.length : 0
    },
    // 是否显示关注按钮
    ifAddIcon(){
      if(this.item.isMyself === 1 || this.item.followStatus === 1 || this.item.followStatus === 2){
        return false
      }else{
        return true
      }
    },
  },
  watch: {
    // 删除视频
    'item.dynamicId'(nval,oval) {
      this.onCreated()
    },
    newShareShow(nval,oval){
      this.shareShow = nval
    }
  },
  created(){
    this.onCreated()
    this.isShowIcon = this.countTextLength({text: this.item.title + this.item.content,size: 28}) >= 1000 ? true : false
  },
  methods:{
    countTextLength, // 计算文字宽度
    // 加载商品数据，以及判断是否为自己的动态，删除动态需要重新加载，原因为父组件数组改变，该组件未变化
    onCreated(){
      // 获取商品列表
      dynamic.getDynamicGoods({dynamicId: this.item.dynamicId}).then(res=>{
        if (res.data && res.data.length>0) {
          res.data.forEach((item,i)=>{
            item.images = JSON.parse(item.images)
          })
          this.goodsList = res.data
        }

        setTimeout(() => {
          this.domloading = true
        }, 1000);
      })
    },
    goodsChange(e){
      this.goodsCurrent = e.detail.current
    },
    _openTitleShowFn(){
      if(this.isShowIcon){
        this.toggleTitleShow = true
        this.$emit('toggleTitleShow',true)
      }
    },
    _closeTitleShowFn(){
      this.toggleTitleShow = false
      this.$emit('toggleTitleShow',false)
    },
    //长按直接复制
    _copyTitle(){
      const that = this;
      wx.setClipboardData({
        data: that.item.title,
        success: function (res) {
          wx.showToast({
            title: '标题已复制',
          });
        }
      });
    },
    _copyContent(){
      const that = this;
      wx.setClipboardData({
        data: that.item.content,
        success: function (res) {
          wx.showToast({
            title: '内容已复制',
          });
        }
      });
    },

    // 打开底部跟团记录
    openBottom(){
      this.$emit('open', this.goodsList, this.goodsCurrent)
    },
    // 数字处理
    playvolumeFn (mun) {
      return Util.playvolume(mun)
    },
    // 关注
    attention(type){
      if(!this.isLogin){
        this.navigateTo({ url: '/pagesB/login/index'})
        return
      }
      this.$emit('attention',type)
    },
    // 跳转去用户主页
    goHomePage(item){
      if(!this.isLogin){
        this.navigateTo({ url: '/pagesB/login/index'})
        return
      }
      this.$emit('goHomePage')
    },
    // 点赞
    clickLike(){
      if(!this.isLogin){
        this.navigateTo({ url: '/pagesB/login/index'})
        return
      }
      this.$emit('clickLike')
    },
    // 帮卖
    clickBestead(type,isNeedPayMaterialCommission){
      if(!this.isLogin){
        this.navigateTo({ url: '/pagesB/login/index'})
        return
      }
      this._colseShareShow() // 关闭弹窗
      if(type === 1 && isNeedPayMaterialCommission){ // 是立即帮卖，并且需要支付笔记佣金
        this.copyShow = true
      }else{
        this.$emit('clickBestead',type)
      }
    },
    // 复用开团
    _configCopyMaterial(){
      this.copyShow = false
      this.$emit('clickBestead',1)
    },
    // 点击更多操作
    clickMore(){
      if(!this.isLogin){
        this.navigateTo({ url: '/pagesB/login/index'})
        return
      }
      if(this.item.isMyself !== 1){
        if(this.item.helpSellStatus === 1){ // 可帮卖
          this.shareShow = true
        }else{
          this.$emit('openShare',1) // 直接分享
        }
      }else{
        this.$emit('openMore') // 打开操作面板
      }
    },
    _colseShareShow(){
      this.shareShow = false
      this.$emit('closeNewShareShow')
    }
  }
}
</script>
<style lang="scss" scoped>
.videoBottomMsg{
  width: 100%;
  padding-top: 32rpx;
  color: #FFFFFF;
  .progressBar {
    width: 100%;
    display: flex;
    padding-bottom: 20rpx;
    .barBox {
      flex: 1;
      height: 6rpx;
      border-radius: 6px;
      background: rgba(220, 222, 224, 0.5);
    }
    .barBox.activeClass {
      background: #ffffff;
    }
    .barBox + .barBox {
      margin-left: 8rpx;
    }
  }
  .textBox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    .left{
      width: calc(100% - 140rpx);
      .communityName {
        width: 100%;
        height: 42rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
      }
      .locaBox{
        display: flex;
        margin-bottom: 16rpx;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        @include toe();
        max-width: 420rpx;
        .icon-address{
          margin-right: 8rpx;
        }
        .ov1{
          flex: 1;
          color: $n2Color;
          @include toe();
        }
      }
      .titleBody{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .titleBox{
          margin-bottom: 24rpx;
          line-height: 36rpx;
          color: $n2Color;
          word-break:break-all;
          @include bov(2);
          flex: 1;
        }
        .zhankaiIcon{
          width: 48rpx;
          height: 48rpx;
          flex-shrink: 0;
          margin-left: 20rpx;
          margin-bottom: 24rpx;
        }
      }
    }
    .right{
      position: absolute;
      right: 32rpx;
      bottom: 48rpx;
      .headBox{
        padding-bottom: 20rpx;
        position: relative;
        .avatarBox{
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
          border: solid 4rpx #fff;
          overflow: hidden;
          background-color: $n1Color;
          box-sizing: border-box;
          .image_box {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .follow_box {
          width: 96rpx;
          height: 40rpx;
          display: flex;
          font-size: 24rpx;
          justify-content: center;
          align-items: center;
          background: #E44435;
          border-radius: 32rpx;
          color: #fff;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .posr{
        position: relative;
        padding-top: 20rpx;
        .jiaobiao{
          position: absolute;
          right: 8rpx;
          top: 8rpx;
          box-sizing: content-box;
          background-color: #E44435;
          border: solid 2rpx #FFF;
          min-width: 22rpx;
          height: 30rpx;
          line-height: 30rpx;
          border-radius:32rpx;
          font-size: 24rpx;
          padding: 0 4rpx;
        }
      }
    }
  }


  .goodsForBox{
    width: 100%;
    height: auto !important;
    min-height: 200rpx;
    flex-shrink: 0;
    display: flex;
    padding: 16rpx;
    border-radius: 16rpx;
    background: rgba(50, 50, 50, 0.8);
    color: #FFFFFF;
    // border: 2rpx solid #E44435;
    position: relative;
    .help_sell_img {
      position: absolute;
      left: 0;
      top: 0;
      width: 110rpx;
      height: 110rpx;
    }
    .goodsImage{
      width: 160rpx;
      height: 160rpx;
      display: block;
      border-radius: 8rpx;
      margin-right: 16rpx;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      .goodsMask{
        position: absolute;
        width: 100%;
        line-height: 160rpx;
        text-align: center;
        left: 0;
        top:0;
        background: rgba(0,0,0,0.7);
        font-size: 20rpx;
      }
      .images{
        width: 100%;
        height: 100%;
      }
      .times{
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        text-align: center;
        font-size: 20rpx;
        background: rgba(0, 0, 0, 0.4);
        line-height: 40rpx;
      }
    }
    .helpSell_box {
      position: absolute;
      right: 0;
      top: 0;
      width: 176rpx;
      height: 200rpx;
      padding: 46rpx 24rpx;
      box-shadow: 0rpx 2rpx 2rpx rgba(0, 0, 0, 0.2);
      border-radius: 0rpx 16rpx 16rpx 0rpx;
      .text_box {
        text-align: center;
        line-height: 48rpx;
        &.text_box_two {
          line-height: 32rpx;
        }
      }
      .share_helpSellBtn {
        width: 100%;
        height: 48rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 48rpx;
        box-shadow: 0rpx 2rpx 2rpx rgba(0, 0, 0, 0.2);
        border-radius: 32rpx;
        margin-top: 12rpx;
      }
      &.helpSell_bg1 {
        background: linear-gradient(218.86deg, #FC5DA0 1.12%, #E44435 100%);
        .text_box {
          color: #FFFBE8;
        }
        .share_helpSellBtn {
          color: #ED6A0C;
          background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);
        }
      }
      &.helpSell_bg2 {
        padding: 40rpx 24rpx;
        background: linear-gradient(225deg, #FDEDC7 0%, #FEDFA6 100%);
        .text_box {
          color: #ED6A0C;
        }
        .share_helpSellBtn {
          color: #FFF;
          background: #E44435;
        }
      }
    }
    .goodsMsg{
      flex: 1;
      position: relative;
      .goods_msg_box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        &.goods_msg_box_s {
          width: calc(100% - 196rpx);
        }
      }
      .avatar_list {
        display: flex;
        align-items: center;
        margin-right: 4rpx;
        .avatarImg_box {
          display: block;
          width: 24rpx;
          height: 24rpx;
          margin-left: -8rpx;
          border-radius: 50%;
          border: none;
          &:nth-child(1) {
            margin-left: 0rpx;
          }
        }
      }
      .goodsName{
        // max-height: 66rpx;
        width: 100%;
        @include bov(2);
      }
      .yimai{
        color: #FDEDC7;
        border: solid 1px #FDEDC7;
        border-radius: 4rpx;
        padding: 0 6rpx;
        margin-right: 20rpx;
      }
      .sellCount_box {
        opacity: 0.6;
      }
      .exclusiveAmount_box {
        font-weight: 400;
        margin-right: 16rpx;
        padding: 0rpx 12rpx;
        background: #FF4D71;
        font-size: 20rpx;
        color: #FFFFFF;
        line-height: 32rpx;
        border-radius: 4rpx;
      }
      .colorOrg{
        background: #FB9551;
      }
      .price{
        font-weight: 600;
        color: $themeColor;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .buyBtn_box {
          width: 164rpx;
          height: 56rpx;
          background: #E44435;
          border-radius: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 24rpx;
          font-weight: 400;
        }
      }
    }
  }
}
.tabbarHeight.videoBottomMsg{
  padding-bottom: 0 !important;
}
.safe-bottom.videoBottomMsg{
  position: absolute;
  z-index: 98;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.4) 76.89%);
}
.spot_list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
  .spot_box {
    width: 12rpx;
    height: 12rpx;
    background: rgba(255, 255, 255, .4);
    margin-right: 8rpx;
    border-radius: 50%;
    overflow: hidden;
    &.spot_box_av {
      background: #fff;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
.spot_list.black{
  .spot_box {
    background: rgba(50, 50, 51, .4);
    &.spot_box_av {
      background: rgba(50, 50, 51, 1);
    }
  }
}
</style>

<style scoped>
.openTitleBox{
    padding: 0 24rpx;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.openTitleBox >>> .copyBottmBtn{
  border: 2rpx solid #E44435;
  border-radius: 32rpx;
  color: #E44435;
  width: 128rpx;
  height: 48rpx;
  line-height: 44rpx;
  text-align: center;
  font-size: 24rpx;
}
.openTitleBox >>> .zhankaiIcon{
  padding: 0 32rpx;
}
.openTitleBox >>> .fengexian{
  height: 1px;
  background-color: #969799;
  margin: 32rpx 0;
}
</style>